<!DOCTYPE html>
<html>
<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>传智健康</title>
    <meta name="description" content="传智健康">
    <meta name="keywords" content="传智健康">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">

    <style type="text/css">
    .el-main{
        position: absolute;
        top: 70px;
        bottom: 0px;
        left: 200px;
        right: 10px;
        padding: 0;
    }
    </style>
</head>
<body class="hold-transition skin-purple sidebar-mini">
    <div id="app">
        <el-container>
            <el-header  class="main-header" style="height:70px;">
                <nav class="navbar navbar-static-top" :class=''>
                    <!-- Logo -->
                    <a href="#" class="logo" style="text-align:center">
                        <span class="logo-lg"><img src="../img/logo.png"></span>
                    </a>
                    <div class="right-menu">
                        <span class="help"><i class="fa fa-exclamation-circle" aria-hidden="true"></i>帮助</span>
                        <el-dropdown class="avatar-container right-menu-item" trigger="click">
                            <div class="avatar-wrapper">
                                <img src="../img/user2-160x160.jpg" class="user-avatar">
                                {{username}}
                            </div>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item divided>
                                    <span style="display:block;">修改密码</span>
                                </el-dropdown-item>
                                <el-dropdown-item divided>
                                    <span @click="logout" style="display:block; cursor:pointer;">
                                        退出
                                    </span>
                                    </el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                </nav>
            </el-header>
            <el-container>
                <el-aside width="200px">
                    <el-menu>
                        <el-submenu v-for="menu in menuList" :index="menu.path">
                            <template slot="title">
                                <i class="fa" :class="menu.icon"></i>
                                {{menu.title}}
                            </template>
                            <template v-for="child in menu.children">
                                <el-menu-item :index="child.path">
                                    <a :href="child.linkUrl" target="right">{{child.title}}</a>
                                </el-menu-item>
                            </template>
                        </el-submenu>
                    </el-menu>
                </el-aside>
                <el-container>
                    <iframe name="right" class="el-main" src="checkitem.html" width="100%" height="100%" frameborder="0"></iframe>
                </el-container>
            </el-container>
        </el-container>
    </div>
</body>
<!-- 引入组件库 -->
<script src="../js/vue.js"></script>
<script src="../plugins/elementui/index.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script src="../js/request.js"></script>
<script>
    new Vue({
    el: '#app',
    data:{
    username:'',//当前登录用户的用户名
    menuList:[
    // ... 菜单数据和之前保持一致，此处省略 ...
{
    "path": "1", "title": "工作台", "icon":"fa-dashboard", "children": []
},
{
    "path": "2", "title": "会员管理", "icon":"fa-user-md",
    "children": [
{"path": "/2-1", "title": "会员档案", "linkUrl":"member.html", "children":[]},
{"path": "/2-2", "title": "体检上传", "children":[]},
{"path": "/2-3", "title": "会员统计", "linkUrl":"all-item-list.html", "children":[]}
    ]
},
{
    "path": "3", "title": "预约管理", "icon":"fa-tty",
    "children": [
{"path": "/3-1", "title": "预约列表", "linkUrl":"ordersettinglist.html", "children":[]},
{"path": "/3-2", "title": "预约设置", "linkUrl":"ordersetting.html", "children":[]},
{"path": "/3-3", "title": "套餐管理", "linkUrl":"setmeal.html", "children":[]},
{"path": "/3-4", "title": "检查组管理", "linkUrl":"checkgroup.html", "children":[]},
{"path": "/3-5", "title": "检查项管理", "linkUrl":"checkitem.html", "children":[]}
    ]
},
{
    "path": "4", "title": "健康评估", "icon":"fa-stethoscope",
    "children":[
{"path": "/4-1", "title": "中医体质辨识", "linkUrl":"all-medical-list.html", "children":[]}
    ]
},
{
    "path": "5", "title": "统计分析", "icon":"fa-heartbeat",
    "children":[
{"path": "/5-1", "title": "会员数量统计", "linkUrl":"report_member.html", "children":[]},
{"path": "/5-2", "title": "套餐预约占比统计", "linkUrl":"report_setmeal.html", "children":[]},
{"path": "/5-3", "title": "运营数据统计", "linkUrl":"report_business.html", "children":[]}
    ]
}
    ]
},
    created(){
    // 在页面加载时调用获取用户信息的方法
    this.fetchUserProfile();
},
    methods: {
    /**
     * 获取当前登录用户的个人信息
     */
    fetchUserProfile() {
    // 注意：此功能依赖一个全局的axios请求拦截器，来自动添加Authorization请求头
    axios.get("/user/profile").then((res) => {
    if(res.data.flag){
    // 请求成功，将返回的用户名赋值给Vue的data属性
    this.username = res.data.data.username;
} else {
    // 如果token无效或已过期，后端会返回错误
    this.$message.error(res.data.message);
    // 1秒后跳转到登录页面
    setTimeout(() => {
    window.location.href = '/backend/login.html'; // 确认登录页面名称
}, 1000);
}
}).catch(() => {
    // 处理网络或其他错误
    this.$message.error("会话已过期，请重新登录。");
    window.location.href = '/backend/login.html'; // 确认登录页面名称
});
},
    /**
     * 退出登录
     */
    logout(){
    this.$confirm('您确定要退出系统吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
}).then(() => {
    // 用户点击确定，调用后端的/user/logout接口
    // 注意：axios请求拦截器会自动携带token
    axios.post("/user/logout").then(res => {
    if (res.data.flag) {
    // 登出成功，清除本地存储的token
    localStorage.removeItem('token');
    // 跳转到登录页面
    window.location.href = '/backend/login.html'; // 请确认您的登录页面名称
} else {
    this.$message.error(res.data.message);
}
});
}).catch(() => {
    // 用户点击取消
    this.$message.info('已取消退出');
});
}
}
});

    $(function() {
    var wd = 200;
    $(".el-main").css('width', $('body').width() - wd + 'px');
});
</script>
</html>
